<!-- 碳排放因子库-组织因子库 -->
<template>
  <div>
    <div class="m_contentBox">
      <a-card :bordered="false">
        <div class="m_aCardBox">
          <div class="tabBox">
            <div class="tabInnerBox">
              <div class="table-page-search-wrapper">
                <a-form-model :model="queryParam" layout="inline" @keyup.enter.native="searchQuery">
                  <a-row :gutter="24">
                    <a-col :span="6">
                      <a-form-model-item :label="$t('message.Factor_name')">
                        <a-input v-model="queryParam.name" allowClear
                                 :placeholder="$t('message.Please_enter')"></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <a-form-model-item :label="$t('message.Product_classification')">
                        <a-select v-model="queryParam.productClassification" allowClear
                                  :placeholder="$t('message.Please_select')"
                                  show-search :filter-option="filterOption">
                          <a-select-option :value="item.value" v-for="(item,index) in product_typeData" :key="index">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <a-form-model-item :label="$t('message.Applicable_scenario')">
                        <a-input v-model="queryParam.scene" allowClear
                                 :placeholder="$t('message.Please_enter')"></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <a-form-model-item :label="$t('message.Applicable_industries')">
                        <a-select v-model="queryParam.industryId" allowClear
                                  :placeholder="$t('message.Please_select')"
                                  show-search :filter-option="filterOption">
                          <a-select-option :value="item.id" v-for="(item,index) in industryData" :key="index">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <a-form-model-item :label="$t('message.Release_organization')">
                        <a-input v-model="queryParam.releaseOrg" allowClear
                                 :placeholder="$t('message.Please_enter')"></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <a-form-model-item :label="$t('message.Release_country_organization')">
                        <a-input v-model="queryParam.ownership" allowClear
                                 :placeholder="$t('message.Please_enter')"></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <a-form-model-item :label="$t('message.Emission_factor_category')">
                        <a-select v-model="queryParam.category" allowClear :placeholder="$t('message.Please_enter')" show-search
                                  :filter-option="filterOption">
                          <a-select-option :value="item.value" v-for="(item,index) in emission_factor_category" :key="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <a-form-model-item :label="$t('message.Emission_factor_database')">
                        <a-select v-model="queryParam.emissionFactorDatabase" allowClear :placeholder="$t('message.Please_enter')" show-search
                                  :filter-option="filterOption">
                          <a-select-option :value="item.value" v-for="(item,index) in emission_factor_database" :key="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <a-form-model-item label="">
                        <a-button type="primary" @click="searchQuery">{{ $t('message.Search') }}</a-button>
                        <a-button style="margin-left: 8px" @click="searchReset">{{ $t('message.Reset') }}</a-button>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </a-form-model>
              </div>
            </div>
          </div>
          <!-- 收藏因子 -->
          <div class="cardBox">
            <a-table ref="table" :columns="columns" :dataSource="collectListData" :loading="loading"
                     :pagination="ipagination" :scroll="{ x: true }" :bordered="false" class="" rowKey="id"
                     size="middle"
                     @change="handleTableChange">
              <div slot="factorValue" slot-scope="text, record">{{ (Number(record.factorValue)).toFixed(4) }}</div>
              <div slot="Unit" slot-scope="text, record"> {{ record.numeratorUnit }}/{{ record.denominatorUnit }}</div>
              <div class="m_cbFlex" slot="action" slot-scope="text, record">
                <a @click="onDetail(record,'ShouCang')">{{ $t('message.Detail') }}</a>
                <a-popconfirm :title="$t('message.Cancel_collect')" :cancelText="$t('message.Cancel')"
                              :okText="$t('message.Confirm')" @confirm="() => onDelCollect(record)">
                  <a>{{ $t('message.Cancel_collect') }}</a>
                </a-popconfirm>
              </div>
            </a-table>
          </div>
        </div>
      </a-card>
    </div>
    <!-- 详情弹窗 -->
    <section class="m_popupBox" v-if="isShowDetailPopup">
      <tpyzDetail ref="tpyzDetail" @back="back"></tpyzDetail>
    </section>
    <!-- 表单弹窗 -->
    <section class="m_popupBox" v-if="isShowFormPopup">
      <tpyzForm ref="tpyzForm" @back="back"></tpyzForm>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { cloneObject } from '@/utils/util'
import { deleteAction, getAction, postAction } from '@/api/manage'
import emptyBox from '@comp/common/emptyBox.vue'
import tpyzDetail from '@views/module_emission/tpfyzkView/modules/tpyzDetail.vue'
import tpyzForm from '@views/module_emission/zzyzkView/modules/tpyzForm.vue'
import { INDUSTRY } from '@/common/constKey'

export default {
  name: 'zzyzkView',
  components: {
    emptyBox,
    tpyzDetail,
    tpyzForm,
  },
  data() {
    return {
      // ======================================================
      loading: false,
      queryParam: {},
      columns: [{
        title: this.$t('message.Emission_factor_database'),
        align: 'center',
        dataIndex: 'emissionFactorDatabase_dictText',
      }, {
        title: this.$t('message.Factor_name'),
        align: 'center',
        dataIndex: 'name',
      }, {
        title: this.$t('message.Factor_value'),
        align: 'center',
        dataIndex: 'factorValue',
        scopedSlots: { customRender: 'factorValue' },
      }, {
        title: this.$t('message.Unit'),
        align: 'center',
        scopedSlots: { customRender: 'Unit' },
      }, {
        title: this.$t('message.Product_classification'),
        align: 'center',
        dataIndex: 'productClassification_dictText',
      }, {
        title: this.$t('message.Applicable_scenario'),
        align: 'center',
        dataIndex: 'scene',
      }, {
        title: this.$t('message.Applicable_industries'),
        align: 'center',
        dataIndex: 'industry',
      },
        {
          title: this.$t('message.Release_organization'),
          align: 'center',
          dataIndex: 'releaseOrg',
        },
        {
          title: this.$t('message.Release_date'),
          align: 'center',
          dataIndex: 'releaseYear',
          sorter: (a, b) => a.releaseYear - b.releaseYear,
        },
        {
          title: this.$t('message.Release_country_organization'),
          align: 'center',
          dataIndex: 'ownership',
        },
        {
          title: this.$t('message.Emission_factor_category'),
          align: 'center',
          dataIndex: 'category_dictText',
        },
        {
          title: this.$t('message.Handle'),
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 120,
          scopedSlots: { customRender: 'action' },
        }
      ],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      // ======================================================
      addListData: [], // 我的添加数据
      collectListData: [], // 我的收藏数据
      isShowDetailPopup: false, // 详情弹窗
      isShowFormPopup: false, // 表单弹窗
      fmData: [], // 分母选项数据
      product_typeData: [], // 分母选项数据
      emission_factor_category: [], // 分母选项数据
      emission_factor_database: [], // 分母选项数据
      industryData: [], // 行业数据
      getCreatePeopleData: [], // 创建人数据
    }
  },
  created() {
    this.init()
    this.getData()
  },
  methods: {
    /**
     * 下拉框数据过滤
     */
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    /**
     * 取消收藏碳排因子库
     */
    onDelCollect(item) {
      deleteAction('/CyEmissionFactorCollect/cyEmissionFactorCollect/delete', { id: item.id }).then((res) => {
        if (res.success) {
          this.$message.success(this.$t('message.delete_collect_success'))
          this.getData()
        }
      })
    },
    /**
     * 详情
     */
    onDetail(item, ShouCang) {
      this.isShowDetailPopup = true
      this.$nextTick(() => {
        console.log('onDetail', this.$refs)
        this.$refs.tpyzDetail.detailIndex = 0
        this.$refs.tpyzDetail.detailKeys = [item.id]
        this.$refs.tpyzDetail.getData(ShouCang)
      })
    },
    /**
     * 查询
     */
    searchQuery() {
      console.log('searchQuery')
      this.ipagination.current = 1
      this.getData()
    },
    /**
     * 重置
     */
    searchReset() {
      // 收藏因子
      this.queryParam = {}
      this.ipagination.current = 1
      this.getData()
    },
    back() {
      this.isShowDetailPopup = false
      this.isShowFormPopup = false
      this.getData()
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination)
      this.ipagination = pagination
      this.getData()
    },
    getData() {
      // 收藏因子
      let reqData = cloneObject(this.queryParam)
      reqData.pageNo = this.ipagination.current
      reqData.pageSize = this.ipagination.pageSize
      getAction('/CyEmissionFactorCollect/cyEmissionFactorCollect/list', reqData).then((res) => {
        if (res.success) {
          this.collectListData = res.result.records || []
          this.ipagination.total = res.result.total
        }
      })
    },
    init() {
      // 创建人
      getAction('/emission/factor/cyEmissionFactor/getCreatePeople', {
        pid: INDUSTRY
      }).then((res) => {
        if (res.success) {
          this.getCreatePeopleData = res.result || []
        }
      })
      // 行业
      getAction('/sys/category/childList', {
        pid: INDUSTRY
      }).then((res) => {
        if (res.success) {
          this.industryData = res.result || []
        }
      })
      // 分母单位
      getAction('/emission/factor/cyEmissionUnit/getAllUnit').then((res) => {
        if (res.success) {
          this.fmData = res.result || []
        }
      })
      // 因子分类
      getAction('/sys/api/getDictItems', {
        dictCode: 'product_type'
      }).then((res) => {
        this.product_typeData = res || []
        console.log('getDictItems product_type =>', res)
      });
      //排放洗漱种类
      getAction('/sys/api/getDictItems', {
        dictCode: 'emission_factor_category'
      }).then((res) => {
        this.emission_factor_category = res || []
        console.log('getDictItems document_type =>', res)
      });
      //碳排因子数据库
      getAction('/sys/api/getDictItems', {
        dictCode: 'emission_factor_database'
      }).then((res) => {
        this.emission_factor_database = res || []
        console.log('getDictItems document_type =>', res)
      });
    }
  },
}

</script>

<style lang="less" scoped>
/deep/ .ant-card-body {
  background: #F5F8F7;
}

.tabBox {
  background: #FFFFFF;
  border-radius: 3px;
}

.tabInnerBox {
  padding: 8px 24px 0;
}

.cardBox {
  margin-top: 24px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 3px;
}

.addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 112px;
  height: 32px;
  background: #148958;
  border-radius: 3px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);

  .addBtn_icon {
    width: 16px;
    height: 16px;
  }
}

.stateBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 32px;
  border-radius: 3px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
}

.stateBox1 {
  background: #E3F9E9;
  border: 1px solid #2BA471;
  color: #2BA471;
}

.stateBox2 {
  background: #FFF0ED;
  border: 1px solid #D54941;
  color: #D54941;
}
</style>
